<template>
  <!------------------------------ 表单项组件 ------------------------------>
  <div :class="formClass" style="overflow:hidden">
    <div class="field-title flex-s-c">
      <span>{{ itemName }}</span>
      <span class="fs-24">{{ itemTime }}</span>
    </div>
    <!-- 插槽处插入相应的表单项 -->
    <slot />
  </div>
</template>

<script>
export default {
  name: 'formItem',
  props: {
    itemName: {
      type: String,
      default: ''
    },
    itemTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    formClass() {
      if (this.className) {
        return 'mb-20 br-5' + this.className
      } else {
        return 'mb-20 br-5'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.field-title {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 30px 32px;
  overflow: hidden;
  color: $color3;
  font-size: 32px;
  line-height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #ebedf0;
  &:before {
    content: '';
    width: 6px;
    height: 28px;
    @include bg-primary;
    position: absolute;
    top: 34px;
    left: 12px;
  }
}
</style>
